<template>
  <div class="user-container1 cu-container">
    <div class="search-container p-[20px] inspection-danger">
      <el-divider content-position="left">隐患详情</el-divider>
      <div class="table-detail">
        <el-row :gutter="20">
          <el-col :span="4" class="title">隐患名称</el-col>
          <el-col :span="8" class="content">{{ editData.dangerName }}</el-col>
          <el-col :span="4" class="title">隐患状态</el-col>
          <el-col :span="8" class="content">
            <el-tag v-if="editData.status == null" type="primary">--</el-tag>
            <el-tag v-if="editData.status == 0" type="success">暂不处理</el-tag>
            <el-tag v-if="editData.status == 1" type="info">待处理</el-tag>
            <el-tag v-if="editData.status == 2" type="warning">处理中</el-tag>
            <el-tag v-if="editData.status == 3" type="danger">已处理</el-tag>
          </el-col>
        </el-row>

        <el-row :gutter="20">
          <el-col :span="4" class="title">隐患描述</el-col>
          <el-col
            :span="8"
            class="content"
            v-if="editData.dangerContent && editData.dangerContent.length > 20"
          >
            <el-tooltip
              effect="dark"
              :content="editData.dangerContent"
              placement="top-start"
            >
              {{ editData.dangerContent.substr(0, 20) + "..." }}
            </el-tooltip>
          </el-col>
          <el-col v-else :span="8" class="content">
            {{ editData.dangerContent }}
          </el-col>

          <el-col :span="4" class="title">是否处理</el-col>
          <el-col :span="8" class="content">
            <el-tag v-if="editData.isHandle" type="">是</el-tag>
            <el-tag v-else type="warning">否</el-tag>
          </el-col>
        </el-row>

        <el-row :gutter="20">
          <el-col :span="4" class="title">地址</el-col>
          <el-col :span="8" class="content">{{ editData.address }}</el-col>
          <el-col :span="4" class="title">耗时</el-col>
          <el-col :span="8" class="content"
            >{{ editData.handleDuration }}h</el-col
          >
        </el-row>

        <el-row :gutter="20">
          <el-col :span="4" class="title">隐患等级</el-col>
          <el-col :span="8" class="content">
            <el-tag v-if="editData.level == 1" type="danger">高</el-tag>
            <el-tag v-if="editData.level == 2" type="warning">中</el-tag>
            <el-tag v-if="editData.level == 3" type="success">低</el-tag>
          </el-col>
          <el-col :span="4" class="title">工单编号</el-col>
          <el-col :span="8" class="content">{{ editData.workOrderId }}</el-col>
        </el-row>

        <el-row :gutter="20">
          <el-col :span="4" class="title">上报人员</el-col>
          <el-col :span="8" class="content">{{ editData.creater }}</el-col>

          <el-col :span="4" class="title">处理部门</el-col>
          <el-col :span="8" class="content">{{
            editData.handleDepartmentName
          }}</el-col>
        </el-row>

        <el-row :gutter="20">
          <el-col :span="4" class="title">联系电话</el-col>
          <el-col :span="8" class="content">{{ editData.createrTel }}</el-col>
          <el-col :span="4" class="title">处理人员</el-col>
          <el-col :span="8" class="content">{{ editData.handler }}</el-col>
        </el-row>

        <el-row :gutter="20">
          <el-col :span="4" class="title">上报时间</el-col>
          <el-col :span="8" class="content">{{ editData.reportTime }}</el-col>

          <el-col :span="4" class="title">联系电话</el-col>
          <el-col :span="8" class="content">{{ editData.handlerTel }}</el-col>
        </el-row>

        <el-row :gutter="20">
          <el-col :span="4" class="title">处理时间</el-col>
          <el-col :span="8" class="content">{{ editData.handleTime }}</el-col>

          <el-col :span="4" class="title">处理措施</el-col>
          <el-col :span="8" class="content">{{ editData.handleMethod }}</el-col>
        </el-row>
      </div>
    </div>

    <div class="search-container p-[20px] mt-[20px]">
      <el-divider content-position="left">处理前照片</el-divider>
      <el-image
        v-for="image in dangerImage"
        :key="image"
        style="width: 100px; height: 100px"
        :src="image"
        :zoom-rate="1.2"
        :max-scale="7"
        :min-scale="0.2"
        :preview-src-list="dangerImage"
        :initial-index="0"
        fit="cover"
      />

      <el-divider content-position="left" class="mt-[30px!important]"
        >处理后照片</el-divider
      >
      <el-image
        v-for="image in handleImage"
        :key="image"
        style="width: 100px; height: 100px"
        :src="image"
        :zoom-rate="1.2"
        :max-scale="7"
        :min-scale="0.2"
        :preview-src-list="handleImage"
        :initial-index="0"
        fit="cover"
      />
    </div>
  </div>
</template>
<script setup lang="ts">
defineOptions({
  name: "Danger",
  inheritAttrs: false,
});
import moment from "moment";
const props = defineProps({
  form: {
    type: Object,
    required: true,
  },
});
let dangerImage = ref([]);
let handleImage = ref([]);

let editData = reactive(props.form);
const emits = defineEmits(["close"]);

// 返回图片列表
function f_GetPreviewList(data) {
  if (data == "") return;
  let arr = [];
  data.forEach((item) => {
    arr.push(item.url);
  });

  return arr;
}

onMounted(() => {
  if (editData.dangerImage && editData.dangerImage.length) {
    editData.dangerImage.forEach((item) => {
      dangerImage.value.push(item.path);
    });
  }
  if (editData.handleImage && editData.handleImage.length) {
    editData.handleImage.forEach((item) => {
      handleImage.value.push(item.path);
    });
  }
});
</script>
<style lang="scss" scoped>
.user-container1 {
  padding: 0 !important;
  padding-bottom: 60px !important;

  .table-detail {
    padding: 0 12px;
    margin-bottom: 20px;
    font-size: 12px;
    border-right: 1px solid #ddd;
    border-bottom: 1px solid #ddd;

    .el-col {
      border-top: 1px solid #ddd;
      border-left: 1px solid #ddd;
    }

    .el-col.title {
      padding: 6px;
      color: #666;
      text-align: center;
      background: #f5f5f5;
      border-left: 1px solid #ddd;
    }

    .el-col.content {
      padding: 6px;
      word-break: break-all;
    }
  }

  .el-divider {
    margin: 12px 0 28px;

    :deep .el-divider__text {
      margin-left: -40px;
      font-family: fangsong, sans-serif;
      font-size: 16px;
      font-weight: bold;
      color: #32bebd;
    }
  }

  :deep .el-descriptions__table {
    tbody {
      tr:nth-child(2n + 1) {
        background-color: #f5f5f5;
      }

      .el-descriptions__label {
        font-size: 12px;
      }

      .el-descriptions__content {
        font-size: 12px;
      }

      .el-descriptions__cell {
        padding-top: 6px;
        padding-bottom: 6px !important;
        padding-left: 12px;
      }
    }
  }

  .search-container {
    height: 100%;
    margin-bottom: 0;
    background: #fff;
  }
}
</style>
<style lang="scss">
.user-dialog {
  background: #f5f5f5;

  .el-dialog__body {
    padding: 15px !important;
    font-size: 14px !important;

    .el-checkbox__input,
    .el-checkbox__original,
    .el-checkbox__inner {
      cursor: not-allowed;
    }
  }
}
</style>
